<script src="${base!}/assets/common/vendor/city-picker/js/data.86.all.js" type="text/javascript"></script>
<script src="${base!}/assets/common/vendor/city-picker/js/picker.86.js" type="text/javascript"></script>
<div class="modal-body">
   <div class="panel-body">
    <div class="form-group">
        <input type="hidden" name="id" value="${obj.id}">
        <label class="col-sm-2 control-label">${msg['order.main.label.uploadInfo']}</label>
        <div class="col-sm-8">
            <div id="queue"></div>
            <div>
                <input id="file_upload"  type="file" multiple="true">
            </div>
            <div id="img" class="div-img-album">
                <!--# for(var payTransfer in payTransfers){ #-->
                <div id="${payTransfer.id}" class="divImgD">
                    <img  onclick="setAlbumImg(${payTransfer.id})" src="${payTransfer.uploadImage}" style='width:100px;height: 80px;margin-bottom: 1px;'><br>
                    <i style='float: right;padding-top: 4px;' class='fa fa-close' onclick="delAlbumImg(${payTransfer.id})"></i></div>
                <!--#} #-->
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2"></label>
        <div class="col-md-8 col-md-offset-2">
            <div class="well well-lg">
                ${msg['order.main.well.uploadInfoTip']}
            </div>
        </div>
    </div>
   </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" style="float: left" data-dismiss="modal" >关闭</button>
    <button class="btn btn-primary navbar-btn" type="button" id="upload" >上传</button>
    <button class="btn btn-primary navbar-btn" type="button" id="skip">跳过</button>
</div>
<style>
    .div-img-album{
        list-style-type: none;
        margin: 2px;
        height: 118px;
        float: left;
    }
    .divImg{
        float: left;
        margin: 2px;
        padding: 2px;
        height:108px;
        width:100px;
        border: 1px solid #dcdcdc;
        cursor: pointer;
    }
    .divImgD{
        float: left;
        margin: 2px;
        padding: 2px;
        height:108px;
        width:100px;
        border: 1px solid red;
        cursor: pointer;
    }
</style>
<script>
    var uploadImageList = [];//上传图片凭证
    var  id = $("input[name='id']:last").val();
    $(document).ready(function () {
        $('#file_upload').uploadifive(initAlbumOptions('queue','imgItem','img'));
        $("#img").find("img").each(function () {
           var imgSrc =  $(this).attr("src");
            uploadImageList.push(imgSrc);
        });
    });

    $("#upload").on("click",function () {
        var uploadInfo;
        if(uploadImageList.length > 0){
            uploadInfo = JSON.stringify(uploadImageList);
        }else{
            Toast.error("支付凭证不可以为空");
            return;
        }
        $.post("${base}/store/order/main/uploadProof",{id: id,uploadInfo:uploadInfo},function (data) {
            if(data.code == 0){
                Toast.success(data.msg);
                setTimeout(function () {
                    window.location.reload();
                },500)
            }else{
                Toast.error(data.msg);
            }
        })
    })

    $("#skip").on("click",function () {
        $.post("${base}/store/order/main/uploadProof",{id: id,uploadInfo:""},function (data) {
            if(data.code == 0){
                Toast.success(data.msg);
                setTimeout(function () {
                    window.location.reload();
                },500)
            }else{
                Toast.error(data.msg);
            }
        })
    })

    /**
     * 初始化相册图方法
     * @param queueId 队列元素ID
     * @param fileuploadId 上传容器ID
     * @param imgDivIdPrefix 图片DIV的名称前缀
     * @param albumContainer 相册图容器Id
     */
    function initAlbumOptions(queueId,imgDivIdPrefix,albumContainerId) {
        var albumContainer = document.getElementById(albumContainerId);
        var sort = Sortable.create(albumContainer);
        var imgIndex = $(albumContainer).children().size();
        return {
            'auto': true,
            'multi': true,
            'width': '100%',
            'height': '35',
            'buttonText': "请选择图片",
            'fileType': 'image/jpg,image/jpeg,image/png',
            'fileSizeLimit': 1024*5,
            'queueSizeLimit': 6,
            'formData': {},
            'queueID': queueId,
            'removeCompleted':true,
            'removeTimeout':0,
            'uploadScript': '${base!}/open/file/upload/image',
            'onUploadComplete': function (file, data) {
                data = JSON.parse(data);
                if (data.code == 0) {
                    uploadImageList.push(data.data);
                    Toast.success(data.msg);
                    var c = "divImg";
                    imgIndex++;
                    if(imgIndex == 1){
                        c = "divImgD";
                    }
                    var imgDivId = imgDivIdPrefix + imgIndex;
                    $(albumContainer).append("<div id='"+imgDivId+"' class='"+c+"'>" +
                            "<img  onclick=\"setAlbumImg('"+imgDivId+"')\" src='" + data.data+ "' style='width:100px;height: 80px;margin-bottom: 1px;'><br>" +
                            "<i style='float: right;padding-top: 4px;' class='fa fa-close' onclick=\"delAlbumImg('"+imgDivId+"')\"></i></div>");
                    sort.destroy();
                    sort = Sortable.create(albumContainer);
                    $("#"+queueId).empty();
                } else {
                    Toast.error(data.msg);
                }
            },
            'onSelect':function () {
                if($("#img").children().size() >= 6){
                    Toast.warning("${msg['goods.main.tip.selectimagessizestart'] + '6' + msg['goods.main.tip.selectimagessizeend']}");
                    $("#file_upload").uploadifive('cancel', $('.uploadifive-queue-item').first().data('file'));
                }
            }
        };
    }

    /*添加图片*/
    function setAlbumImg(id){
        $("#"+id).removeClass("divImg").addClass("divImgD").siblings().removeClass("divImgD").addClass("divImg");
    }
    /*删除图片*/
    function delAlbumImg(id){
        var data = $(this).prev('img').attr("src");
        uploadImageList.splice(getImageListIndex(data),1);
        $("#"+id).remove();
    }

    //获取上传图片的索引下标
    function  getImageListIndex(val) {
        for(var i=0;i<uploadImageList.length;i++){
            if(uploadImageList[i] == val){
                return i;
            }
        }
    }
</script>